window.addEventListener("load",function(){
    var div = document.querySelector(".father");
    var spans= document.querySelectorAll("span");
    var imgs = document.querySelectorAll("img");
    var ul = document.querySelector(".img");
    //按钮里面的控制变量
    var num = 0;
    var circle=0;
    var flagL=true;
    var flagR=true;

    // ul.style.left="100px";
    var spot = document.querySelector(".spot");
    //绑定鼠标移入移出事件
    div.addEventListener("mouseenter",function(){
        spans[0].style.display="block";
        spans[1].style.display="block";
    })
    div.addEventListener("mouseleave",function(){
        spans[0].style.display="none";
        spans[1].style.display="none";
    })
    //动态创建小圆点的个数，并绑定click事件
    for(var i=0 ;i<imgs.length;i++){
        var li = document.createElement("li");
        li.setAttribute("index",i);
        spot.appendChild(li);
        spot.children[0].className="current";
        spot.children[i].addEventListener("click",function(){
            var index = this.getAttribute("index");
            num=index;
            circle=index;
            //干掉所有人，留下我自己
            for(var i=0;i<spot.children.length;i++){
                spot.children[i].className=""; 
            }
            //点击小圆点切换图片
            console.log("ulLeft="+ul.offsetLeft);
            console.log(div.offsetLeft);
            animate(ul,-div.offsetWidth*index);
            this.className="current";
        })
    }
    //点击左右两边按钮切换轮播图图片
    //左按钮
    spans[0].addEventListener("click",function(){
        
        if(num==0){
            if(flagL){
                var newli = ul.children[3].cloneNode(true);
                ul.insertBefore(newli,ul.children[0]);
                flagL=false;
            }
            ul.style.left=-450 + "px";
            animate(ul,-div.offsetWidth*num,function(){
                console.log("222");
                ul.style.left=-450*4 + "px";
                num=3;
            });
            circle=3;
            spot.children[0].className="";
            spot.children[circle].className="current";
        }else{
            console.log("左按钮里的num="+num);
            animate(ul,-div.offsetWidth*num);
            for(var i=0;i<spot.children.length;i++){
                spot.children[i].className=""; 
            }
            circle--;
            console.log("circle="+circle);
            spot.children[circle].className="current";  
            num--; 
        }
    })
   //右按钮
    spans[1].addEventListener("click",function(){
        num++;
        console.log("右按钮里的num="+num);
        if(num==4){
            if(flagR){
                var newli = ul.children[0].cloneNode(true);
                ul.appendChild(newli);
                flagR=false;
            }
            animate(ul,-div.offsetWidth*num,function(){
                console.log("222");
                ul.style.left="0px";
                num=0;
            });
            spot.children[0].className="current";
            spot.children[circle].className="";
            circle=0;
        }else{
            // console.log("右按钮里的num="+num);
            animate(ul,-div.offsetWidth*num);
            for(var i=0;i<spot.children.length;i++){
                spot.children[i].className=""; 
            }
            circle++;
            console.log("circle="+circle);
            spot.children[circle].className="current";   
        }
    })
})